<template>
  <div style="padding: 14px 14px 0">
    <RouteTitle isBack />
    <a-row class="content">
      <a-form layout="vertical">
        <a-form-item label="主体昵称" v-bind="validateInfos.name">
          <a-input
            v-model:value="modelRef.name"
            placeholder="请输入主体昵称"
            style="width: 500px"
            size="large"
          />
        </a-form-item>
        <!-- <a-form-item
          label="主体LOGO"
          v-bind="validateInfos.avatar"
          extra="建议尺寸200*200，图片不大于500kb"
        >
          <a-upload
            :action="$utils.imgAction"
            :headers="{ 'org-token': $store.getters.token }"
            v-model:file-list="logoList"
            @change="handleLogoUpload"
            :multiple="true"
            name="image"
            :data="{ dir: 'work_ai' }"
            accept="image/*"
            list-type="picture-card"
            size="large"
          >
            <div v-if="!logoList.length">
              <PlusOutlined />
              <div>上传LOGO</div>
            </div>
          </a-upload>
        </a-form-item> -->
      </a-form>
      <a-col
        :span="24"
        style="
          border-top: 1px solid #efeff5;
          padding-top: 20px;
          padding-left: 40px;
        "
      >
        <a-button
          type="primary"
          size="large"
          style="border: none; border-radius: 6px"
          :disabled="!isTeamLeader"
          @click="submitClick"
        >
          确定
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  onMounted,
} from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { Form, message } from "ant-design-vue";
import store from "../../../store";
import request from "../../../common/utils/request";
import { useTeam } from "../../../hooks/team";

const useForm = Form.useForm;

export default defineComponent({
  name: "Info",
  components: { PlusOutlined },
  setup() {
    const state = reactive({
      count: 0,
      logoList: [
        // {
        //   url: villageInfo?.value,
        // },
      ],
    });

    const { currentTeam } = useTeam();
    const isTeamLeader = computed(() => currentTeam.value?.can_edit);

    const modelRef = reactive({
      // avatar: "",
      name: "",
    });
    const rulesRef = reactive({
      // avatar: [
      //   {
      //     required: true,
      //     message: "请上传LOGO",
      //   },
      // ],
      name: [
        {
          required: true,
          message: "请输入主体昵称",
        },
        {
          max: 12,
          message: "主体信息不得超过12个字符",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const getTeamList = () => {
      request.get("/work_ai", "/user/team/list", {}).then((res) => {
        const item = res?.list?.find(
          (item) => item.id == store.state?.user?.teamId
        );
        if (item?.id) {
          // modelRef.avatar = item.avatar;
          modelRef.name = item.name;
          modelRef.id = item.id;
          state.logoList = [
            {
              url: item.avatar,
            },
          ];
        }
      });
    };

    const handleLogoUpload = (info) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList.map((file, index) => {
          if (file.response) {
            if (file.response.code == 1000) {
              file.url = file.response.data.fileUrl;
            } else {
              message.warning(file.response.msg);
              resFileList.splice(index, 1);
            }
          }
        });
      }
      state.logoList = resFileList;
      if (state.logoList.length) {
        modelRef.avatar = state.logoList[0].url;
      } else {
        modelRef.avatar = "";
      }
    };

    const submitClick = () => {
      validate().then(() => {
        let params = {};
        for (let key in modelRef) {
          params[key] = modelRef[key];
        }
        request
          .put("/work_ai", "/user/team", {
            ...params,
          })
          .then((res) => {
            message.success("保存成功");
            store.dispatch("GetTeamList");
          });
      });
    };

    getTeamList();

    return {
      ...toRefs(state),
      validateInfos,
      resetFields,
      modelRef,
      handleLogoUpload,
      submitClick,
      isTeamLeader,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #f0efef;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
}
</style>
